<style lang="less">
.teacher-edit {
  & .head-img {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0;
    z-index: 10;
  }
}
</style>
<template>
  <div>
    <a-form-model ref="form" :model="info" v-bind="formLayout" :rules="rules">
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="教师账号" prop="account">
            <a-input v-model="info.account" :maxLength="20" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="教师姓名" prop="name">
            <a-input v-model="info.name" :maxLength="20" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="手机号码" prop="phone">
            <a-input-number v-model="info.phone" style="width: 100%" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="教师状态" prop="status">
            <ZkSelect v-model="info.status" :options="getStatusOpts"></ZkSelect>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="id">
        <a-col :span="12">
          <a-form-model-item label="注册时间" prop="createdTime">
            <div>{{ info.createdTimeStr }}</div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item
            label="教师简介"
            prop="introduction"
            :labelCol="formLayout1.labelCol"
            :wrapperCol="formLayout1.wrapperCol"
          >
            <a-textarea
              v-model="info.introduction"
              :autoSize="{ minRows: 4, maxRows: 10 }"
              :maxLength="500"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="教师密码" :prop="!id ? 'password' : ''">
            <a-input-password v-model="info.password" :maxLength="20" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>
<script>
import ZkSelect from "@/appBase/ZkSelect.vue";
import { lenRule, notEmptyRule, phoneRule } from "@/appBase/formRules";
import { getStatusOpts } from "@/modules/common/service/base";
import { BaseStatusEnum } from "@/modules/common/enum/enum";
// import InputTable from './components/InputTable.vue';

export default {
  name: "TeacherEdit",
  components: {
    ZkSelect
  },
  data() {
    return {
      /** 布局配置 */
      formLayout: {
        layout: "horizontal",
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
        },
      },
      formLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
      },
      id: null,
      info: {
        account: "",
        collegeCode: "0",
        headUrl: "",
        id: 0,
        introduction: "",
        majorCode: "",
        name: "",
        password: "",
        phone: "",
        sex: "",
        status: BaseStatusEnum.ENABLE,
      },
      rules: {
        account: [notEmptyRule(), lenRule({ max: 20 })],
        name: [notEmptyRule(), lenRule({ max: 20 })],
        sex: [notEmptyRule()],
        phone: [phoneRule()],
        majorCode: [notEmptyRule()],
        status: [notEmptyRule()],
        introduction: [lenRule({ max: 500 })],
        password: [notEmptyRule(), lenRule({ max: 20 })],
      },
    };
  },
  watch: {
  },
  methods: {
    handleOk() {
      this.$refs.form.validate(async (valid) => {
        console.log(valid);
        if (!valid) return;
        const param = this.info;
        if (this.id) {
          await updateEduTeacher(param);
        } else {
          await addEduTeacher(param);
        }
        this.visible = false;
        if (this._onOk) this._onOk();
      });
    },
    getStatusOpts,
  },
};
</script>